<template>
  <div class="home-body">
    <el-container>
      <el-header class="home-header">
        <el-row type="flex" align="middle" class="height_width-full">
          <el-col :span="18">
            <div style="text-align: center">
              <span class="home-header-text">资产管理系统</span>
            </div>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="10" type="flex" align="middle" justify="end">
              <el-col>
                <div style="display: flex;align-items: center">
                  <el-avatar :size="50" icon="el-icon-user" :src="userImg"></el-avatar>
                  <span class="username-span">{{ $store.getters.getUser.nickname }}</span>
                </div>
              </el-col>
              <el-col>
                <div class="close-btn" @click="logout()">
                  <i class="el-icon-switch-button"></i>
                  <span>退出</span>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-row style="width: 100%" :gutter="10">
          <el-col :span="3" class="aside-box">
            <el-aside width="100%" class="home-aside">
              <el-col :span="24">
                <el-menu
                  :default-active="'0'"
                  class="el-menu-vertical-demo">
                  <router-link :to="'/index'">
                    <el-menu-item :index="'0'">
                      <i class="el-icon-menu"></i>
                      <span slot="title">首页</span>
                    </el-menu-item>
                  </router-link>
                  <router-link :to="'/asset-department'">
                    <el-menu-item :index="'1'">
                      <i class="el-icon-connection"></i>
                      <span slot="title">部门管理</span>
                    </el-menu-item>
                  </router-link>
                  <router-link :to="'/asset-person'">
                    <el-menu-item :index="'2'">
                      <i class="el-icon-user"></i>
                      <span slot="title">人员管理</span>
                    </el-menu-item>
                  </router-link>
                  <router-link :to="'/asset-category'">
                    <el-menu-item :index="'3'">
                      <i class="el-icon-s-operation"></i>
                      <span slot="title">资产类别</span>
                    </el-menu-item>
                  </router-link>
                  <router-link :to="'/asset-brand'">
                    <el-menu-item :index="'4'">
                      <i class="el-icon-price-tag"></i>
                      <span slot="title">品牌</span>
                    </el-menu-item>
                  </router-link>
                  <router-link :to="'/gaining-method'">
                    <el-menu-item :index="'5'">
                      <i class="el-icon-finished"></i>
                      <span slot="title">取得方式</span>
                    </el-menu-item>
                  </router-link>
                  <router-link :to="'/asset-provider'">
                    <el-menu-item :index="'6'">
                      <i class="el-icon-office-building"></i>
                      <span slot="title">供应商</span>
                    </el-menu-item>
                  </router-link>
                  <router-link :to="'/asset-storage'">
                    <el-menu-item :index="'7'">
                      <i class="el-icon-guide"></i>
                      <span slot="title">存放地点</span>
                    </el-menu-item>
                  </router-link>
                  <router-link :to="'/asset-device-use'">
                    <el-menu-item :index="'8'">
                      <i class="el-icon-key"></i>
                      <span slot="title">设备用途</span>
                    </el-menu-item>
                  </router-link>
                  <router-link :to="'/asset-discard-mode'">
                    <el-menu-item :index="'10'">
                      <i class="el-icon-circle-close"></i>
                      <span slot="title">报废方式</span>
                    </el-menu-item>
                  </router-link>
                  <router-link :to="'/asset-user'">
                    <el-menu-item :index="'11'">
                      <i class="el-icon-bank-card"></i>
                      <span slot="title">个人信息</span>
                    </el-menu-item>
                  </router-link>
                </el-menu>
              </el-col>
            </el-aside>
          </el-col>
          <el-col :span="21" :offset="3" style="margin-top: 110px;">
            <el-main style="width: 100%">
              <div class="home-main">
                <router-view></router-view>
              </div>
            </el-main>
          </el-col>
        </el-row>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {}
  },
  computed: {
    userImg() {
      return this.$api.SERVER_URL + this.$store.getters.getUser.img;
    }
  },
  methods: {
    logout() {
      this.$confirm('确定退出吗？', '提示', {
        confirmButtonText: '狠心离开',
        cancelButtonText: '再看一会',
        type: 'warning'
      }).then(() => {
        this.$store.commit("setToken", null);
        this.$store.commit("setUser", null);
        this.Storage.Local.set("token", null);
        this.Storage.Local.set("user", null);
        this.$router.push({
          path: "/login",
          name: "Login"
        })
        this.$notify({
          type: 'warning',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$notify({
          type: 'success',
          message: '这是一个明智的选择'
        });
      });
    }
  }
}
</script>

<style scoped>

.aside-box {
  position: fixed;
  left: 0;
  top: 110px;
  border-radius: 5px;
  z-index: 999;
}

.home-header {
  width: 100%;
  height: 100px !important;
  background-color: #4996ec;
  margin-bottom: 10px;
  box-shadow: 0px 2px 10px 1px #62b8e0;
  position: fixed;
  top: 0;
  z-index: 999
}

.home-header-text {
  font-size: 22px;
  color: white;
}

.home-body {
  width: 100%;
  height: 100%;
}

.home-aside {
  margin-left: 8px;
  border-radius: 10px
}

.el-main {
  padding: 0 20px;
}

.home-main {
  padding: 15px;
  background-color: white;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}

.username-span {
  margin-left: 6px;
  color: white;
  font-size: 18px;
}

.close-btn {
  color: white;
  cursor: pointer;
}

.close-btn > i {
  font-size: 20px;
  margin-right: 2px;
}


</style>
